<template>
    <div>
        <el-row>
            <el-radio v-model="radio" label="1">选项1</el-radio>
            <el-radio v-model="radio" label="2">选项2</el-radio>
            <el-radio-button label="北京"></el-radio-button>
            <el-radio-button label="广州"></el-radio-button>
            <el-radio-button label="深圳"></el-radio-button>
        </el-row>
        <i class="el-icon-edit"></i>
        <i class="el-icon-share"></i>
        <i class="el-icon-video-camera-solid"></i>
        <el-button type="primary">主要按钮</el-button>
        <el-link icon="el-icon-video-camera-solid" href="https://i.csdn.net/#/msg/like" :underline="underline"
                 target="_blank">ElementUi
        </el-link>
        <!-- 就是我们书写不同的按钮就会得到我们相应的风格 都是可以获取的       -->
        <div style="width: 300px">
            <el-row>
                <!-- type 是修改我们的样式 icon里面就是我们的图标 就是刚刚那几个图标跑 也就是说
                 我们的这个按钮是可以和我们图标进行联合使用           -->
                <el-button icon="el-icon-search" size="medium" round></el-button>
                <el-button type="primary" icon="el-icon-edit" circle disabled></el-button>
                <el-button type="primary" icon="el-icon-edit" circle></el-button>
                <el-button type="success" icon="el-icon-check" circle @click="test()" :loading="loading"></el-button>
            </el-row>
        </div>
        <div style="width: 300px">
            <el-row>
                <el-input v-model="input" placeholder="请输入内容" show-password
                          prefix-icon="el-icon-thumb" suffix-icon="el-icon-cpu" maxlength="3"
                          show-word-limit
                ></el-input>
                <el-button type="primary" @click="click()">一个小按钮</el-button>
            </el-row>
        </div>
    </div>
</template>
<script>
    export default {
        name: "test",
        methods: {
            click() {
                this.input = "adas";
            },
            test() {
                this.loading = true
                setTimeout(() => {
                    this.loading = false
                }, 3000)
            }
        },
        data() {
            return {
                loading: false,
                underline: false,
                radio: '1',
                //这个其实就是我们会将我们的复选框进行选中，我们的label里面就是它对应的值
                // 但不是对应的文本值 文本值我们是可以直接写在文本框里面的 这里识别的是字符 不能写整数
                input: ""
            }
        }
    }
</script>
<style scoped>
</style>